<template>
  <!-- 导航 -->
  <el-row style="margin: 10px;padding: 15px">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>质量管理</el-breadcrumb-item>
        <el-breadcrumb-item>检测模板</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>
  <!-- 搜索栏第一行-->
  <el-row style="margin: 10px;padding: 15px">
    <el-col :span="24">
      <el-form inline>
        <el-form-item label="检测模板编号">
          <el-input/>
        </el-form-item>
        <el-form-item label="检测模板名称">
          <el-input/>
        </el-form-item>
        <el-form-item label="产品编码">
          <el-input/>
        </el-form-item>
        <el-form-item label="产品名称">
          <el-input/>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 搜索栏第二行-->
  <el-row style="margin: 10px;padding: 15px">
    <el-col :span="24">
      <el-form inline>
        <el-form-item>检测种类</el-form-item>
        <el-form-item>
          <el-checkbox>[来料检验]</el-checkbox>
          <el-checkbox>[过程检验]</el-checkbox>
          <el-checkbox>[首检]</el-checkbox>
          <el-checkbox>[末检]</el-checkbox>
          <el-checkbox>[巡检]</el-checkbox>
          <el-checkbox>[自检]</el-checkbox>
          <el-checkbox>[成品检验]</el-checkbox>
          <el-checkbox>[发货检验]</el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button>重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
  <!-- 工具栏 -->
  <el-row style="margin: 0px 10px;padding: 0px 10px">
    <el-col :span="24">
      <el-button-group>
        <el-button @click="toAdd" type="primary" style="margin-right: 20px">新增</el-button>
        <el-button @click="toEdits" type="success" style="margin-right: 20px">修改</el-button>
        <el-button @click="toDeletes" type="danger" style="margin-right: 20px">删除</el-button>
      </el-button-group>
    </el-col>
  </el-row>
  <!-- 数据列表 -->
  <el-row style="margin: 0px 10px;padding: 0px 15px">
    <el-col :span="24">
      <el-table :data="models" border stripe ref="modelTable">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="modelEncode" label="检测模板编号">
          <template #default="scope">
            <el-link @click="toShowDetail(scope.row.modelId)">
              {{scope.row.modelEncode}}
            </el-link>
          </template>
         </el-table-column>
          <el-table-column prop="modelName" label="检测模板名称"/>
          <el-table-column prop="modelType" label="检测种类"/>
          <el-table-column prop="modelEnable" label="是否启用">
            <template #default="scope">
              <el-tag type="warning" v-if="scope.row.modelEnable == 0">否</el-tag>
              <el-tag type="success" v-else-if="scope.row.modelEnable == 1">是</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="330">
            <template #default="scope">
              <el-link @click="toEdit(scope.row.modelId)" style="margin: 0px 5px"
                       type="primary">
                <el-icon>
                  <EditPen/>
                </el-icon>
                修改
              </el-link>
              <el-link @click="toDelete(scope.row.modelId)" style="margin: 0px 5px"
                       type="primary">
                <el-icon>
                  <Delete/>
                </el-icon>
                删除
              </el-link>
            </template>
          </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!-- 新增弹窗组件 -->
  <modelAdd :is-show="addWinIsShow" :model="model"/>
  <!-- 行级编辑组件 -->
  <modelEdit :is-show="editWinIsShow" :modelId="editModelId"/>
  <!-- 详情显示组件 -->
  <modelDetail :is-show="detailWinIsShow" :modelId="detailModelId"/>
</template>
<script setup>
// 封装查询的列表数据
import {onBeforeMount, onMounted, ref} from "vue";
import modelDetail from "@/views/quality control/common defects/detect_model/model-detail.vue"
import modelEdit from "@/views/quality control/common defects/detect_model/model-edit.vue"
import modelAdd from "@/views/quality control/common defects/detect_model/model-add.vue"
import qualityRequest from "@/api/quality.js"
import {ElMessage, ElMessageBox} from "element-plus";
import {ArrowRight} from "@element-plus/icons-vue";
import router from "@/router/index.js";

let models = ref([]);
// 申明对象保存当前新增的对象
let model = ref({});
let addWinIsShow = ref(false);
let editWinIsShow = ref(false);
let detailWinIsShow = ref(false);
let modelTable = ref(null)
let editModelId = ref(null)
let detailModelId=ref(null)

/**
 * 工具栏新增按钮事件
 */
function toAdd() {
  addWinIsShow.value = true;
}

/**
 * 显示详情
 */
function toShowDetail(id) {

  detailModelId=id
  detailWinIsShow.value = true;
  console.log("点击了详情")

}

/**
 * 行编辑事件
 */
function toEdit(id) {
  editModelId = id;
  console.log("editDetectId得值为" + editModelId)
  editWinIsShow.value = true;
}

/**
 * 行删除事件
 */
function toDelete(modelId) {
  console.log("modelId" + modelId)
  ElMessageBox.confirm(
      "你确定要删除删除吗?",
      "warning", {
        confirmButtonText: '是的',
        cancelButtonText: '点错了',
        type: 'warning',
      }
  ).then(() => {

    qualityRequest.deleteModel(modelId, res => {
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "成功删除"
        })
        loadModels();
      } else {
        ElMessage({
          type: "warning",
          message: "删除失败"
        })
      }
    });
  }).catch(() => {
  });

}

/**
 * 批量删除
 */
// function toDeletes() {
//   let selectedRows = detectTable.value.getSelectionRows();
//   if (selectedRows == 0) {
//     ElMessage({
//       type: "warning",
//       message: "你没有选择任何数据"
//     })
//   } else {
//     let deleteDetects = [];
//     selectedRows.forEach(row => {
//       deleteDetects.push(row.detectId)
//     })
//     // console.log("deleteDefects的值为"+deleteDefects)
//     qualityRequest.deleteDetects(deleteDetects, res => {
//       if (res.code == 200) {
//         ElMessage({
//           type: "success",
//           message: "成功删除"
//         })
//         loadDetects();
//       } else {
//         ElMessage({
//           type: "warning",
//           message: "删除失败"
//         })
//       }
//     })
//   }
// }

/**
 * 加载检测项列表
 */
function loadModels() {
  // 通过API加载检测项列表
  qualityRequest.loadModellist(res => {
    models.value = res.data;
    console.log("detects的value" + models.value)
  })
}

onMounted(() => {
      loadModels();
    }
)

</script>